<template>
	<div class="body">
		<div class="header">
			<router-link to="/home" class="header_left"></router-link>
			<p>【驴妈妈】回归盛年，悠游香港</p>
			<router-link to="/home" class="header_right"></router-link>
		</div>
		<img src="static/guanggaoimg/1500464579444.jpg" class="banner">
		<div class="tatle">
			<h2>精选特惠</h2>
		</div>
		<div class="content_top clearFix">
			<a href="">
				<img src="static/guanggaoimg/154221d4-c09e-45a1-97e7-a6a36ec946e9_480_320.jpg">
				<div class="position">立减50</div>
				<div class="font">
					<p>香港迪士尼乐园</p>
					<p class="color">￥455 起/人</p>
				</div>
			</a>
			<a href="">
				<img src="static/guanggaoimg/154221d4-c09e-45a1-97e7-a6a36ec946e9_480_320.jpg">
				<div class="position">立减50</div>
				<div class="font">
					<p>香港迪士尼乐园</p>
					<p class="color">￥455 起/人</p>
				</div>
			</a>
			<a href="">
				<img src="static/guanggaoimg/154221d4-c09e-45a1-97e7-a6a36ec946e9_480_320.jpg">
				<div class="position">立减50</div>
				<div class="font">
					<p>香港迪士尼乐园</p>
					<p class="color">￥455 起/人</p>
				</div>
			</a>
			<a href="">
				<img src="static/guanggaoimg/154221d4-c09e-45a1-97e7-a6a36ec946e9_480_320.jpg">
				<div class="position">立减50</div>
				<div class="font">
					<p>香港迪士尼乐园</p>
					<p class="color">￥455 起/人</p>
				</div>
			</a>
			<a href="">
				<img src="static/guanggaoimg/154221d4-c09e-45a1-97e7-a6a36ec946e9_480_320.jpg">
				<div class="position">立减50</div>
				<div class="font">
					<p>香港迪士尼乐园</p>
					<p class="color">￥455 起/人</p>
				</div>
			</a>
			<a href="">
				<img src="static/guanggaoimg/154221d4-c09e-45a1-97e7-a6a36ec946e9_480_320.jpg">
				<div class="position">立减50</div>
				<div class="font">
					<p>香港迪士尼乐园</p>
					<p class="color">￥455 起/人</p>
				</div>
			</a>
		</div>
		<div class="tatle">
			<h2>行在香港</h2>
		</div>
		<div class="content_center">
			<a href="">
				<img src="static/guanggaoimg/768c26b8-2656-4d4b-be75-182e8bc08acc_480_320.jpg">
				<div class="font">
					<p>香港双层开篷观光大巴士票</p>
					<p class="color">抢购价:<span>￥455</span>起/人</p>
				</div>
				<div class="button">
					立即抢购
				</div>
			</a>
			<a href="">
				<img src="static/guanggaoimg/768c26b8-2656-4d4b-be75-182e8bc08acc_480_320.jpg">
				<div class="font">
					<p>香港双层开篷观光大巴士票</p>
					<p class="color">抢购价:<span>￥455</span>起/人</p>
				</div>
				<div class="button">
					立即抢购
				</div>
			</a>
			<a href="">
				<img src="static/guanggaoimg/768c26b8-2656-4d4b-be75-182e8bc08acc_480_320.jpg">
				<div class="font">
					<p>香港双层开篷观光大巴士票</p>
					<p class="color">抢购价:<span>￥455</span>起/人</p>
				</div>
				<div class="button">
					立即抢购
				</div>
			</a>
		</div>
		<div class="tatle">
			<h2>吃货天堂</h2>
		</div>
		<div class="content_center">
			<a href="">
				<img src="static/guanggaoimg/d5d4d830-9cac-4ae5-ba88-e6386505b177_480_320.jpg">
				<div class="font">
					<p>香港双层开篷观光大巴士票</p>
					<p class="color">抢购价:<span>￥455</span>起/人</p>
				</div>
				<div class="button">
					立即抢购
				</div>
			</a>
			<a href="">
				<img src="static/guanggaoimg/d5d4d830-9cac-4ae5-ba88-e6386505b177_480_320.jpg">
				<div class="font">
					<p>香港双层开篷观光大巴士票</p>
					<p class="color">抢购价:<span>￥455</span>起/人</p>
				</div>
				<div class="button">
					立即抢购
				</div>
			</a>
		</div>
		<div class="footer">
			<img src="static/guanggaoimg/footer.png">
		</div>

		<img src="static/guanggaoimg/circleApp_03.png" class="fixed_left">
		<div class="fixed_right">
			回到顶部
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{

			}
		},
		mounted(){
			document.body.scrollTop=0;
		}
	}
</script>
<style scoped>
.body{
	background: #6438c6;
}
.header{
	display: flex;
	justify-content: space-between;
	font-size: .5rem;
	padding-right: .3rem;
	line-height: 1.066667rem;
	background: #fff;
}
.header a{
	width: 0.933333rem;
	height: 1.066667rem;
}
.header_left{
	background: url(../../../static/guanggaoimg/x06oosg3y8ti168vwd0dj1uki5n4vda5.png)no-repeat center;
	background-size: 30%;
}
.header_right{
	background: url(../../../static/guanggaoimg/home.png)no-repeat center;
	background-size: 100%;
}
.banner{
	width: 100%;
}
.tatle{
	padding: .3rem;
	background: url(../../../static/guanggaoimg/type1.png)no-repeat center;
	background-size: 80%;
	height: 1.066667rem;
	text-align: center;
	color: #fff;
	font-size: .5rem;
}
.content_top{
	padding-left: .2rem;
	font-size: .35rem;
}
.content_top a{
	width: 48%;
	margin: 0 .19rem .2rem 0;
	position: relative;
	float: left;
}
.content_top img,.content_center img,.footer img{
	width: 100%;
}
.font{
	padding: .2rem;
	background: #fff;
}
.color{
	color: red;
	font-size: .4rem;
}
.position{
	position: absolute;
	left: 0;
	top: 0;
	background: #de2500;
	color: #fff;
	font-size: .3rem;
	padding: .03rem .1rem;
}
.content_center{
	padding: .2rem .2rem 0 .2rem;
}
.content_center a{
	width: 100%;
	margin-bottom: .2rem;
	display: inline-block;
	position: relative;
}
.button{
	background: #de2500;
	border-radius: 5px;
	width: 2rem;
	height: .6rem;
	color: #fff;
	text-align: center;
	line-height: .6rem;
	font-size: .4rem;
	position: absolute;
	right: .5rem;
	bottom: .2rem;
}
.fixed_left{
	width: 13%;
	position: fixed;
	left: .1rem;
	bottom: .3rem;
}
.fixed_right{
	width: 1.6rem;
	height: 0.96rem;
	background: rgba(0,0,0,.7);
	border-radius: 10px;
	position: fixed;
	right: .3rem;
	bottom: .5rem;
	color: #fff;
	line-height: 0.96rem;
	text-align: center;
}
</style>